<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<title>商品列表</title>
		<link rel="stylesheet" href="/static/css/style.css" />

	</head>

	<body>
		<div id="goods" v-cloak>
			<header class="bar">
				<div class="form-search">

					<div class="area">
						<span @click="categoryPicker">${category}</span><i></i>
					</div>

					<div class="unit">
						<i class="icon icon-fangdajing"></i>
						<input type="text" placeholder="请输入商品名称" v-model="keyword" />
					</div>
					<span class="btn" @click="search">查找</span>

				</div>
			</header>
			<div class="container">
				<div class="tab tab-mall">
					<div class="menu">
						<li :class="tabIndex == 0?'active':''" @click="tabChange(0)">
							<a>综合<i class="icon icon-xiangxiajiantou"></i></a>
						</li>
						<li :class="tabIndex == 1?'active':''" @click="tabChange(1)">
							<a>券后价<i class="icon icon-xiangxiajiantou"></i></a>
						</li>
						<li :class="tabIndex == 2?'active':''" @click="tabChange(2)">
							<a>优惠券<i class="icon icon-xiangxiajiantou"></i></a>
						</li>
						<li :class="tabIndex == 3?'active':''" @click="tabChange(3)">
							<a>销量<i class="icon icon-xiangxiajiantou"></i></a>
						</li>
					</div>
				</div>
				<div class="blank" v-show="mallList.length == 0">
					<span class="icon icon-noitem"></span>
					<h3>没有查询到记录</h3>
				</div>
				<div class="scroll-wrapper" id="pullrefresh" style="top:93px" v-show="mallList.length > 0">
					<div class="scroll">
						<div class="list list-mall">

							<ul>
								<li v-for="(item,index) in mallList">
									<a :href="'/app/wxbot/goods/detail?goods_id='+item.goods_id+'&wxid={{wxid}}'">
										<img :src="item.loading" />
										<img :src="item.pic" :alt="item.introduce" class="pic" />

										<span class="h4">${item.title}</span>
										<span class="h5"><em>￥${item.price}</em><i>￥${item.org_price}</i><span class="buy">已购 ${item.sales_num}</span></span>
										<span class="quan"><i>券</i>${item.quan_price}元</span>
										<!--<span class="zhuan">分红：<em>￥4.66</em></span>-->
										<span class="go">去购买</span>
										<span class="clearfix"></span></a>
								</li>

							</ul>
						</div>
					</div>

				</div>
			</div>

		</div>
	</body>
	<script src="/static/js/mui.min.js"></script>
	<script src="/static/js/vue.min.js"></script>
	<script src="/static/js/zepto.min.js"></script>
	<script src="/static/js/plugins/popup.js"></script>
	<script src="/static/js/plugins/picker.js"></script>
	<script src="/static/js/plugins/input.js"></script>
	<script src="/static/js/plugins/poppicker.js"></script>
	<script src="/static/js/plugins/scroll.js"></script>
	<script src="/static/js/plugins/pullrefresh.js"></script>

	<script>
		let goods = new Vue({
			el: '#goods',
			delimiters: ['${', '}'],
			data: {
				qrid: "{{qrid}}",
				mallList: [],
				tabIndex: "",
				pageNum: 1,
				pageSize: 20,
				cid: "",
				sort: "0",
				pages: 1,
				count: 0,
				loading: "",
				category: "类别",
				categoryList: [{
					value: '',
					text: '全部'   

				}, {
					value: '1',
					text: '女装'
				}, {
					value: '9',
					text: '男装'
				}, {
					value: '10',
					text: '内衣'
				}, {
					value: '2',
					text: '母婴'
				}, {
					value: '3',
					text: '美妆'
				}, {
					value: '4',
					text: '居家日用'
				}, {
					value: '5',
					text: '鞋品'
				}, {
					value: '6',
					text: '美食'
				}, {
					value: '7',
					text: '文体车品'
				}, {
					value: '8',
					text: '数码家电'
				}, {
					value: '11',
					text: '箱包'
				}, {
					value: '12',
					text: '配饰'
				}, {
					value: '13',
					text: '户外运动'
				}, {
					value: '14',
					text: '家装家纺'
				}],
				keyword: "",
				kouling: "",
				canPullUp: true
			},
			mounted: function() {
				let params = this.querystring();
				let cid = params.cid;
				if(cid) {
					this.cid = cid;
				}
				if(params.keyword) {
					this.keyword = params.keyword;
				}
				for(let i in this.categoryList) {
					if(this.categoryList[i].value == this.cid) {
						this.category = this.categoryList[i].text;
						break;
					}
				}

				this.request();
				mui('#pullrefresh').pullRefresh({
					up: {
						contentrefresh: '正在加载...',
						callback: this.pullupRefresh
					}
				});

			},

			methods: {
				querystring() {
					let query = location.search.substr(1);
					query = query.replace(/(&amp;)|(\*\|\*)/g, '&')
					let search = query.split("&");
					
					let args = {};
					for(let i = 0; i < search.length; i++) {
						let item = search[i].split("=");
						let name = decodeURIComponent(item[0]),
							value = decodeURIComponent(item[1]);
						if(name) {
							args[name] = value;
						}

					}
					return args;
				},

				categoryPicker() {
					let self = this;
					let categoryPicker = new mui.PopPicker();
					categoryPicker.setData(this.categoryList);
					categoryPicker.show(function(items) {
						self.category = items[0].text;
						self.cid = items[0].value;
						self.keyword = "";
						self.resetRequest();
					});
				},
				request() {
					let self = this;
					popup.loading();

					$.post('/app/wxbot/goods/index', {
						cid: self.cid,
						pageNum: self.pageNum,
						pageSize: self.pageSize,
						sort: self.sort,
						keyword: self.keyword
					}, function(res) {
						if(!self.canPullUp && self.count == 0) {
							mui('#pullrefresh').pullRefresh().refresh(true);
						}
						console.log(res)
						if(res.errno == 0) {
							for(let i in res.data.data) {
								res.data.data[i].loading = "/static/img/loading.gif";
							}
							if(self.pageNum == 1) {
								self.mallList = res.data.data;
							} else {
								self.mallList = self.mallList.concat(res.data.data);
							}

							self.pageNum++;
							self.pages = res.data.totalPages;
						} else {
							popup.prompt(res.errmsg);
						}

						popup.close();

					});

				},
				resetRequest() {
					this.pageNum = 1;
					this.count = 0;

					if(mui('#pullrefresh').pullRefresh()) {
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);
					};
					this.request();
				},

				tabChange(index) {
					let self = this;
					console.log(index)
					this.tabIndex = index;
					this.sort = index.toString();
					this.resetRequest();

				},
				search() {
					if(!this.keyword.trim()) {
						return popup.prompt("请输入商品名称关键词");
					}
					this.cid = "";
					this.category = "全部";
					this.resetRequest();

				},
				pullupRefresh() {
					let self = this;

					self.count++;
					if(self.count >= self.pages) {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						self.canPullUp = false;
					} else {
						setTimeout(function() {

							self.request();
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();

						}, 1500);
					}

				}

			}

		});
	</script>

</html>